<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
        /* 通过阿里巴巴引入外部图标 */
        @font-face {
    font-family: 'iconfont';  /* project id 3326910 */
    src: url('');
    src: url('?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.woff') format('woff'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.ttf') format('truetype'),
    url('#iconfont') format('svg');
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
    .login-box{
      position:absolute;
      top: 200px;
      right: 300px;
      height: 300px;
      width: 300px;
      background-color: rgba(255, 255, 255, 0.336);
      border-radius: 5%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.2s ease-in 0.1s;
    }
    .login-box input{
      background-color: rgba(255, 255, 255, 0.541);
      /* border-color: rgba(255, 255, 255, 0.171);
      color: rgba(255, 255, 255, 0.171); */
    }
    .login-box:hover{
      background-color: rgba(255, 255, 255, 0.719);
    }
  </style>
</head>
<body>
  <!-- 页面导航 -->
  <nav>
    <ul class="nav justify-content-center nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="index.html">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="search.html">查询</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="borrow.html">借书</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="return.html">归还</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="person.html">个人信息</a>
      </li>
    </ul>
    <div class="logout">
      <i class="iconfont bookshelf-item-remove" style="font-size: 50px;color: rgb(209, 11, 11);">&#xe6ce;</i>
    </div>
  </nav>
  <!-- 轮播图 -->
  <div id="carouselExampleFade" class="carousel  slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100"  src="img/1_1.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100"  src="img/2_2.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100"  src="img/3_3.jpg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <!-- 登录窗口 -->
  <div class="login-box">
    <div class="form-group">
      <label for="exampleInputEmail1">账户</label>
      <input type="email" id="login-account" class="form-control"  aria-describedby="emailHelp" placeholder="请输入您的账户">
      <label for="exampleInputEmail1">密码</label>
      <input type="text" id="login-password" class="form-control"  aria-describedby="emailHelp" placeholder="请输入您的密码">
      <br>
      <button type="button" id="login-btn"  class="btn btn-outline-primary btn-block" >登录</button>

    </div>
  </div>
  <!-- 主页面 -->
  <div class="container">
  </div>
  <script>
    $('#login-btn').click(function(){

      var account=$('#login-account').val()
      var password=$('#login-password').val()
      if(!accountCheck(account)){
        alert("您的账号输入不正确！")
        return;
      }
      if(!passwordCheck(password)){
        alert("您的密码输入不正确！") 
        return;
      }
      //发送ajax请求
      $.post(
      'http://localhost:8080/LoginController',  // 请求路径
      {   //  请求参数
        identification:account,
        password:password
      },
      // 异步ajax回调函数
      function(data,status){
        if(status==='success'){
          data=JSON.parse(data)
          if(data.status===1){    //这是后端定义的登录状态码。到这步说明ajax请求本身是没有问题的
            if(sessionStorage.getItem('userInfo')!==undefined){
              sessionStorage.removeItem('userInfo')
            }
            //  将用户的信息存储到sessionStorage
            var userInfo=JSON.stringify(data)
            sessionStorage.setItem('userInfo',userInfo)
            // 将用户的登录信息存储到cookie，该信息应该是用户合法登录的唯一凭证，须与后端过滤器配合使用
            // 注：用户登录的信息一般由后端设置，这里只是演示
            $.removeCookie('id',{ path: '/' });    //如果有的话，先删掉原来的
            $.removeCookie('name',{ path: '/' });
            $.cookie('id', data.reader.rdId, { expires: 7,path: '/'});
            $.cookie('name', data.reader.rdName, { expires: 7,path: '/' })
            renewNavStatus()      //  更新导航栏状态（代码在/js/nav.js）
          }else{    // 如果请求资源异常，直接把后端定义的异常提示展示给用户
            alert(data.msg)
          }
        }else{    // 如果ajax请求本身失败了，则提示ajax请求异常
          alert('登录请求发送失败')
        }
       
      })
    })
    //用户账号正则检查
    var accountCheck = function(account) {
      account=account.replaceAll(' ','')      // 先替换空格，这里没有对输入长度进行约束
      var pattern = /^[A-Za-z0-9]+$/
      return pattern.test(account)
    }
    //用户密码正则检查
    var passwordCheck = function(password){
      password=password.replaceAll(' ','')
      // var pattern = /^[A-Za-z0-9]{6,10}$/
      var pattern = /^[A-Za-z0-9]+$/
    return pattern.test(password) 
    }

  </script>
</body>
</html>